<template>
  <div class="wrapper">
    <tab :tabList="program_types_list" @handleClickTab="handleClickTab"></tab>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import Tab from "../../components/Tab";
export default {
  name: "ProgramTypeModule",
  data() {
    return {};
  },
  computed: {
    ...mapState({
      program_types_list: state => {
        return state.program_type.program_types_list;
      }
    })
  },
  components: {
    Tab
  },
  mounted() {
    this.getProgramTypesList();
  },
  methods: {
    ...mapMutations({
      updateParamsValue: "update_params_value"
    }),
    ...mapActions({
      getProgramTypesList: "program_type/getProgramTypesList"
    }),
    handleClickTab(key, value) {
      this.updateParamsValue({ key, value });
    }
  }
};
</script>

<style scoped>
.wrapper {
  position: relative;
  top: -8px;
  box-sizing: border-box;
  margin: 0 10px;
  padding: 0 10px;

  width: 355px;
  height: 50px;

  border-radius: 4px;
  background: white;
}
</style>
